<template>
    <div class="time-box">
        <div class="time-list flex-a">
            <div :class="tab == index ? 'tab active' : 'tab'" v-for="(item, index) in weekList" :key="index"
                @click="changeTab(index)">
                <div class="week">{{ item.week }}</div>
                <div class="day">{{ item.day }}</div>
            </div>
        </div>
        <div class="select-time">
            <div class="title">请选择预约时段</div>
            <div class="state-list flex-a">
                <div class="flex-a s1"><span></span>可选</div>
                <div class="flex-a s2"><span></span>已预约</div>
                <div class="flex-a s3"><span></span>已选</div>
            </div>
            <div class="list">
                <div :class="active == index ? 'active item' : 'item'" v-for="(item, index) in list" :key="index"
                    @click="changeAct(item, index)">
                    {{ item }}
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted } from 'vue';
import { Searchbar } from '@nutui/nutui-taro';
import mitt from "../../../utils/mitt";
import { Search2, RectDown } from '@nutui/icons-vue-taro';
import dayjs from "dayjs";
export default {
    components: {
        'nut-searchbar': Searchbar,
        Search2,
        RectDown
    },
    setup() {
        const state = reactive({
            weekList: [
                {
                    week: '星期四',
                    day: '07月17日'
                },
                {
                    week: '星期四',
                    day: '07月17日'
                },
                {
                    week: '星期四',
                    day: '07月17日'
                },
                {
                    week: '星期四',
                    day: '07月17日'
                },
                {
                    week: '星期四',
                    day: '07月17日'
                }
            ],
            tab: 0,
            list: [],
            ind: 0,
            active: -1,
            time: '',
            date: '',
            week: '',
        });
        onMounted(() => {
            let time = new Date()
            let week = time.getDay()
            let month = time.getMonth() + 1
            let day = time.getDate()
            console.log(week, month, day)
            let weeks = state.weekList
            weeks.forEach((item, index) => {
                item.week = getWeek(week + index) || ''
                item.day = getMonth(index)
            })
            state.weekList = weeks
            getList()
            getNewList()
        })
        const getMonth = (i) => {
            let time = new Date().getTime()
            let endTime = time + i * 24 * 3600 * 1000
            let endTimes = dayjs(endTime).format('MM月DD日')
            return endTimes
        }
        const getHM = (now, i) => {
            let time = new Date(now).getTime()
            let endTime = time + 1800 * 1000 * i
            let endTimes = dayjs(endTime).format('HH:mm')
            return endTimes
        }
        const getWeek = (n) => {
            if (n > 7) {
                n = n - 7
            }
            if (n == 1) {
                return '星期一'
            } else if (n == 2) {
                return '星期二'
            } else if (n == 3) {
                return '星期三'
            } else if (n == 4) {
                return '星期四'
            } else if (n == 5) {
                return '星期五'
            } else if (n == 6) {
                return '星期六'
            } else if (n == 7) {
                return '星期天'
            }
        }
        const changeTab = (index) => {
            state.tab = index
            state.date = state.weekList[index].day
            state.week = state.weekList[index].week
            if (index == 0) {
                getNewList()
            } else {
                getList()
            }
            transData()
        }
        const getList = () => {
            let arr = [] as any
            for (var i = 0; i < 48; i++) {
                arr[i] = getHM('2024-01-01 00:00:00', i)
            }
            state.list = arr
        }
        const transData = () => {
            mitt.emit("time", state.date + ' ' + state.time)
            mitt.emit("selTime", state.week + ' ' + state.time)
        }
        const getNewList = () => {
            let currTime = getHM(new Date().getTime(), 2)
            console.log(currTime)
            let num = Number(currTime.split(':')[1])
            let n = '', current = ''
            if (num <= 30) {
                n = '30'
                current = Number(currTime.split(':')[0]) + ':' + n
            } else {
                n = '00'
                current = (Number(currTime.split(':')[0]) + 1) + ':' + n
            }
            state.ind = state.list.findIndex((item) => { return item == current })
            state.list = state.list.slice(state.ind, state.list.length)
        }
        const changeAct = (item, index) => {
            state.active = index
            state.time = item
            transData()
        }
        return {
            ...toRefs(state), changeTab, getWeek, getMonth, getHM, getNewList, getList, changeAct, transData
        };
    }
};
</script>
<style lang="scss">
.time-box {
    width: 92%;
    margin: 40rpx auto 0;
    border: 1rpx solid #DDDDDD;
    border-radius: 10rpx;

    .time-list {
        display: flex;

        .tab {
            font-size: 24rpx;
            text-align: center;
            flex: 1;
            color: #333;
            padding: 10rpx 0;
            background: #F5F5F5;

            .week {}

            .day {}
        }

        .tab.active {
            background: #fff;
        }
    }

    .select-time {
        padding: 20rpx;

        .title {
            font-weight: bold;
            font-size: 28rpx;
        }

        .state-list {
            margin: 20rpx 0;
            font-size: 24rpx;

            span {
                display: inline-block;
                width: 25rpx;
                height: 25rpx;
                border-radius: 7rpx;
                margin-right: 5rpx;
            }

            .flex-a {
                margin-right: 50rpx;
            }

            .s1 span {
                border: 1rpx solid #333;
            }

            .s2 span {
                background: #DDDDDD;
            }

            .s3 span {
                background: #2AEA95;
            }
        }

        .list {
            .item {
                border: 1rpx solid #333;
                color: #333;
                font-size: 26rpx;
                border-radius: 50rpx;
                width: 18%;
                height: 50rpx;
                text-align: center;
                line-height: 50rpx;
                display: inline-block;
                box-sizing: border-box;
                margin: 0 2.5% 20rpx 0;
            }

            .item:nth-child(5n+5) {
                margin: 0 0 20rpx 0;
            }

            .item.active {
                background: #2AEA95;
                border-color: #2AEA95;
                color: #fff;
            }
        }
    }
}
</style>